<!DOCTYPE html>
<html>
<head>
    <% include ../common/meta.ejs %>
    <% include ../common/public.ejs %>
    <link href="//cdn.bootcss.com/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="<%= global.config.publicPath %>/jquery-file-upload/css/jquery.fileupload.css" rel="stylesheet">
    <link href="<%= global.config.publicPath %>/uedit/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <style>
        .detail-list .dolphin_list {
            max-height: 300px;
        }
        .form-group textarea {
            font-size: 14px;
        }
    </style>
</head>
<body>
<% include ../common/header.ejs %>

<div class="container">
    <div class="dolphin-row main page-content">
        <div class="page-header">
            <h5 class="content-title">资产维护</h5>
        </div>
        <div class="dolphin-col-24">
            <div class="dolphin-row">
                <div class="dolphin-col-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-title">
                                模型树
                            </div>
                        </div>
                        <div class="panel-body">
                            <div id="categoryTree"></div>
                        </div>
                    </div>
                </div>
                <div class="dolphin-col-18" id="infoPanel">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <h3 class="panel-title">
                                    <i aria-hidden="true" class="fa fa-table fa-lg"></i>
                                    资产列表
                                </h3>
                                <div class="operationButton" style="float: right;margin-top:-26px;margin-right: -15px;">
                                    <button id="addProduct" class="btn btn-success btn-sm" type="button">
                                        <span class="glyphicon glyphicon-plus-sign dolphin-rotate-90"></span>
                                        添加资产
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="itemList"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel">
    <div class="modal-dialog" role="document" style="top: 0;left: 20%;width: 60%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="dataModalLabel">新增资产</h4>

            </div>
            <div class="modal-body">
                <form class="form-horizontal edit-form">
                    <input type="hidden" class="form-control" name="id">
                    <input type="hidden" class="form-control" name="category.id">

                    <ul class="nav nav-tabs" role="tablist" id="myTabs">
                        <li role="presentation" class="active">
                            <a href="#basicInfo" aria-controls="basicInfo" role="tab" data-toggle="tab">基本信息</a>
                        </li>
                        <li role="presentation">
                            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">资产描述</a>
                        </li>
                        <li role="presentation">
                            <a href="#attrPanel" aria-controls="attrPanel" role="tab" data-toggle="tab">附加属性</a>
                        </li>
                    </ul>
                    <div class="tab-content" style="margin-top: 10px;">
                        <div role="tabpanel" class="tab-pane active" id="basicInfo">
                            <div class="dolphin-row">
                                <div class="dolphin-col-10">
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">资产编码</label>
                                        <div class="col-md-6">
                                            <input class="form-control" name="code" type="text" dol-validate="required">
                                        </div>
                                    </div>
                                </div>
                                <div class="dolphin-col-10">
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">资产名称</label>
                                        <div class="col-md-6">
                                            <input class="form-control" name="name" type="text" dol-validate="required">
                                        </div>
                                    </div>
                                </div>
                                <div class="dolphin-col-10">
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">特征资产</label>
                                        <div class="col-md-6">
                                            <div class="pull-left">
                                                <input type="checkbox" name="characteristic" id="charactInput" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="dolphin-col-10">
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">资产数量</label>
                                        <div class="col-md-6">
                                            <input type="number" name="quantity" id="asset_quantity" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="dolphin-row">
                                <div class="dolphin-col-10">
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">简单描述</label>
                                        <div class="col-md-6">
                                            <textarea name="remark"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="dolphin-col-10">
                                    <div class="form-group">
                                        <div class="col-md-4"></div>
                                        <div class="col-md-6">
                                            <button type="button" class="btn btn-danger btn-sm genSku hidden">生成SN</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="dolphin-row" style="border-top: 1px solid #EEEEEE;">
                                <div class="dolphin-col-12" >
                                    <div class="img-form" style="margin-top: 3px;">
                                        <span class="btn btn-success fileinput-button"><i
                                                    class="glyphicon glyphicon-plus"></i>
                                        <span>图片选择</span>
                                        <input class="fileupload" type="file" name="upfile" multiple>

                                        </span>
                                        <div style="width: 240px;max-height: 240px;">
                                            <img src="/page/images/house_default.png" id="aImage"
                                                 style="width: 100%;height: 100%;display: block;"
                                                 class="imageShowBody"/>
                                            <input name="primaryImage" type="hidden" class="image-name">
                                        </div>
                                    </div>
                                </div>
                                <div class="dolphin-col-12">
                                    <div style="margin-top: 5px;" class="detail-list"></div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                            <div>
                                <script type="text/plain" id="myEditor" style="width:1000px;height:240px;"></script>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="attrPanel">
                            <div class="dolphin-row" id="extendStringPanel">
                            </div>
                            <div class="dolphin-row" id="extendTextAreaPanel">
                            </div>
                            <div class="dolphin-row" id="extendImagePanel">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary modelSave">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<% include ../common/footer.ejs %>
<script src="<%= global.config.publicPath %>/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="<%= global.config.publicPath %>/jquery-file-upload/js/jquery.fileupload.js"></script>
<script src="//cdn.bootcss.com/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script src="<%= global.config.publicPath %>/uedit/umeditor.config.js"></script>
<script src="<%= global.config.publicPath %>/uedit/umeditor.min.js"></script>
<script src="<%= global.config.publicPath %>/uedit/lang/zh-cn/zh-cn.js"></script>
<script>
    $(function () {
        yams.page.um = UM.getEditor('myEditor', {
            imageUrl: "<%= global.config.contextPath == '/' ? '' : global.config.contextPath %>/file/"
            , imagePath: "/uploadFiles"
            , imageFieldName: "upfile"
            , initialFrameWidth: '100%'
            , initialFrameHeight: 360
            , autoHeightEnabled: false
        });
        $('.fileupload').fileupload({
            url: '<%= global.config.contextPath == '/' ? '' : global.config.contextPath %>/file/',
            dataType: 'json',
            done: function (e, data) {
                var p = $(e.target).closest('.img-form');
                p.find('.imageShowBody').attr("src", '/uploadFiles' + data.result.url).show();
                p.find('.image-name').val(data.result.url);
            },
            progressall: function (e, data) {
            }
        });
    });
</script>
</body>
</html>
